<template>
    <div class="prize_ov">
        <div class="header_pix">
            <div class="top_header">
                <img src="https://img.528btc.com.cn/activity/box/back.png" @click="gotoindex()">
                <div class="name">中奖记录</div>
                <!-- <div class="withdraw" @click="cashtc()">提现</div> -->
            </div>
        </div>
        <!-- <div class="top_header_content"></div> -->
        <div class="prize_statis">
            <div class="list">
                <div class="ny">序号</div>
            </div>
            <div class="list">
                <div class="ny">中奖时间</div>
            </div>
            <div class="list">
                <div class="ny">奖品</div>
            </div>
        </div>
        
        <div class="prize_content">
            <el-empty :image-size="200" v-if="prizeList.length == 0"></el-empty>
            <div class="prize_list" v-for="(vo,index) in prizeList" :key='index'>
                <div class="btc">{{index + 1}}</div>
                <div class="time">{{ parseTime(vo.date, "{m}-{d} {h}:{i}") }}</div>
                <div class="ny">
                    {{vo.activityRewardTitle}}
                </div>
            </div>
            <!-- <div class="prize_list" v-for="vo in 30">
                <div class="btc">0.00001 BTC</div>
                <div class="time">08-09 16:45</div>
                <div class="ny">
                    <div class="off">待提现</div>
                </div>
            </div> -->
            
        </div>
    </div>
</template>

<script>
import { parseTime } from "@/utils/date";
export default {
name: 'myprize',
components: {
    
},
data() {
    return {
        prizeList:[],
        activityCode:'box',
        activityCodes:['invite','box'],
        page:0,
        cashStatus:false,
        applyInput:'',
        applyDisable:false,
        txboxTabsStatus:1,

        //提现
        email:'',
        phone:'',
        code:'',
        code_num:'获取验证码',
        seconds: 60,
        timerActive:false,
        qhnum:'86',

        //白名单
        golist:[],
        phoneCountry:'+86',
        show:false,
        //按钮状态
        codeStatus:false,
        tyStatus:false,
        tyStatus2:false,
        tyStatusforbid:true,

        urlToken:''
        
    }
},
mounted(){
    document.documentElement.style.background = '#fff';
},
created(){
    // // let token = encodeURIComponent(this.$route.query.token).replace(/%20/g, '+').replace(/%2B/g, '+')
    // // let token = this.$route.query.token.replace(/%20/g, '+').replace(/%2B/g, '+')
    // // 创建URLSearchParams对象并传入包含token参数的字符串
    // var tokenString = window.location.hash;
    // // 获取名为token的查询参数的值
    // // 使用正则表达式提取token值
    // var match = tokenString.match(/[?&]token=([^&]+)/);

    // // 如果找到匹配项，则获取第一个捕获组的值，即token值
    // var tokenValue = match && match[1];
    // // 打印token值
    // this.urlToken = decodeURIComponent(tokenValue).replace(/ /g, '+')
    
    // this.$axios.defaults.headers.post['Authorization'] = this.urlToken;

    // localStorage.setItem("token", this.urlToken);
    // // console.log(window.location.hash)
    this.myPrize()
},
methods:{
    parseTime,
    cashAmount(){
        
    },
    history(){
        this.$axios.get(this.$url + '/xhj-gather-app/memberActivityRewardCash/history').then(res=>{
            this.golist = res.data.data
        })
    },
    startTimer() {
      this.timerActive = true;
      const timer = setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          clearInterval(timer);
          this.timerActive = false;
          this.seconds = 60
        }
      }, 1000);
      
    },

    gotoindex(){
        this.$dsbridge.callmethod('finishNativePage','',res => {
          
        })
    },
    myPrize(){
      let _this = this
      this.$axios.post(this.$url + '/xhj-gather-app/memberActivityReward/page',{
        page: 1,
        limit: 20,
        activityCode: 'newYear',
        memberFlag: true
      }).then(res=>{
          _this.prizeList = [..._this.prizeList,...res.data.data.list]
      })
    },
}
}
</script>
<style lang="scss">
#app{
	background: #fff;
    // width: 100vw;
    // height: 100vh;
    // overflow-y:hidden;
    // overflow-x:hidden;
}
.country-modal-search-box{
    box-sizing: border-box;
}
.vue-country-intl-modal .vue-country-list-wrap{
    box-sizing: border-box;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    
}
</style>
<style scoped lang="scss">
.prize_ov{
    padding-top: constant(safe-area-inset-top); /* 适用于iOS 11.2以后 */
  padding-top: env(safe-area-inset-top); /* 适用于iOS 11.0和11.1 */
    // height: 100%;
    // overflow-y: auto;
}
.top_header_content{
    width: 100%;
    height: 7.33rem;
}
.header_pix{
    position: fixed;
    left: 0;
    top: 0;
}
.top_header{
    width: 62.5rem;
    height: 7.33rem;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    position: relative;
    img{
        width: 4rem;
        height: 4rem;
        position: absolute;
        left: 2rem;
    }
    .name{
        font-size: 3rem;
        font-weight: 500;
        color: #24292E;
    }
    .withdraw{
        font-size: 2.67rem;
        font-weight: 500;
        color: #F0B90B;
    }
}
.prize_statis{
    width: 62.5rem;
    height: 4rem;
    background: #FFFFFF;
    margin-top: 7.33rem;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 2rem;
    box-sizing: border-box;
    .list{
        width: 33%;
        .ny{
            font-size: 1.83rem;
            font-weight: 400;
            color: #B7BDC4;
            text-align: left;
        }
    }
    .list:nth-child(1) .ny{
        text-align: left;
    }
    .list:nth-child(3){
       display: flex;
       justify-content: flex-end;
    }
    .list:nth-child(3) .ny{
       width: 10.67rem;
       text-align: right;
    }
}
.prize_content{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .prize_list{
        width: 62.5rem;
        height: 8.67rem;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        border-bottom: 0.08rem solid #EEEEEE;
        box-sizing: border-box;
        .btc{
            width: 33.33%;
            font-size: 2.33rem;
            font-weight: 400;
            color: #24292E;
        }
        .time{
            width: 33.33%;
            font-size: 2rem;
            font-weight: 400;
            color: #24292E;
            text-align: left;
        }
        .ny{
            width: 33.33%;
            display: flex;
            justify-content: flex-end;
        }
        .on{
            width: 10.67rem;
            height: 4.67rem;
            background: #FFF5D1;
            border-radius: 0.67rem;
            font-size: 2rem;
            font-weight: 400;
            color: #F0B90B;
            text-align: center;
            line-height: 4.67rem;
        }
        .off{
            width: 10.67rem;
            height: 4.67rem;
            background: #E5E5E5;
            border-radius: 0.67rem;
            font-size: 2rem;
            font-weight: 400;
            color: #B7BDC4;
            text-align: center;
            line-height: 4.67rem;
        }
    }
}

.withdraw_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background: #fff;
border-radius: 24px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 100;
.withdraw_title{
    line-height: 50rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #24292E;
}
.withdraw_txt{
    color: #24292E;
    font-size: 28rpx;
    line-height: 40rpx;
    padding: 0 20px;
    text-align: center;
}
.service_text{
    width: 80%;
    text-align: center;
    // font-size: 24rpx;
    color: #59636D;
}
input{
    width: 80%;
    height: 50px;
    box-sizing: border-box;
    background: #E4E6E9;
    padding: 8px 6px;
    border-radius: 4px;
    display: block;
    border-color: transparent;
    box-sizing: border-box;
}
.withdraw_btn{
    width: 80%;
    background: #FFF5D1;
    border-radius: 0.67rem;
    font-size: 2rem;
    font-weight: 400;
    color: #F0B90B;
    text-align: center;
    line-height: 4.67rem;
}
.close{
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40px;
    height: 40px;
    img{
        width: 100%;
        height: 100%;
    }
}

}
.boxmask{
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, .6);
    position: fixed;
    top:0;
    left: 0;
    z-index: 99;
}

.txbox{
    position: fixed;
    left: 50%;
    top:50%;
    width: 46.67rem;
    margin-left: -23.33rem;
    height: 47.33rem;
    margin-top: -23.66rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.08rem 0rem 0rem #EEEEEE;
    border-radius: 1.33rem;
    backdrop-filter: blur(21.48148148148148px);
    z-index: 999;
    
    box-sizing: border-box;
    .txbox_fl{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 3rem;
        box-sizing: border-box;
    }
    .txbox_title{
        width: 100%;
        height: 4rem;
        font-size: 3rem;
        font-weight: 500;
        color: #000000;
        line-height: 4rem;
        text-align: center;
    }
    .txbox_tabs{
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: space-around;
        margin:3rem 0;
        .list{
            color: #89939E;
            font-size: 2.33rem;
            display: flex;
            align-items: center;
            flex-direction: column;
            .b_border{
                width: 2rem;
                height: 0.33rem;
                background: #24292E;
                border-radius: 0.17rem;
                margin-top: 0.67rem;
            }
        }
        .active{
            color: #000;
        }
        
    }

    .txbox_input_content{
        display: flex;
        align-items: center;
        flex-direction: column;
        .email{
            width: 100%;
            height: 5.33rem;
            background: #F5F5F5;
            border-radius: 0.67rem;
            padding: 1rem 2rem;
            box-sizing: border-box;
            border:0;
            font-size: 2.33rem;
        }
        .email::placeholder{
            font-size: 2.33rem;
            color: #89939E;
        }
        .email:hover{
            border:0;
        }
        .email:focus{
            outline:0;
        }
        .phone_content{
            width: 100%;
            height: 5.33rem;
            background: #F5F5F5;
            border-radius: 0.67rem;
            padding: 1rem 2rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .area_code{
                display: flex;
                align-content: center;
                .num{
                    font-size: 2.33rem;
                    font-weight: 400;
                    color: #24292E;
                    // width: 3.67rem;
                    height: 3.67rem;
                    line-height: 3.67rem;
                    // padding-top: 0.5rem;
                }
                img{
                    width: 3.67rem;
                    height: 3.67rem;
                    margin-right: 1.33rem;
                }
            }
            .phone{
                font-size: 2.33rem;
                border-radius: 0.67rem;
                border:0;
                background: #F5F5F5;
                width: 100%; 
            }
            .phone::placeholder{
                font-size: 2.33rem;
                color: #89939E;
            }
            .phone:hover{
                border:0;
            }
            .phone:focus{
                outline:0;
            }
        }
        .code_input{
            width: 100%;
            height: 5.33rem;
            background: #F5F5F5;
            border-radius: 0.67rem;
            padding: 1rem 2rem;
            box-sizing: border-box;
            margin-top: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .code{
                font-size: 2.33rem;
                border-radius: 0.67rem;
                border:0;
                background: #F5F5F5;
                width: 60%;
            }
            .code::placeholder{
                font-size: 2.33rem;
                color: #89939E;
            }
            .code:hover{
                border:0;
            }
            .code:focus{
                outline:0;
            }
            .get_code{
                width: 40%;
                height: 3.33rem;
                font-size: 2.33rem;
                font-weight: 400;
                color: #F0B90B;
                line-height: 3.33rem;
                text-align: right;
            }
            .code_color{
                color: #888;
            }
        }
    }
    .bottom{
        margin-top: 2.67rem;
        width: 89%;
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: 3rem;
        .bottom_title{
            height: 2.67rem;
            font-size: 2rem;
            font-weight: 400;
            color: #59636D;
            line-height: 2.67rem;
            padding-left: 0.4rem;
        }
        .bottom_button{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 3.33rem;
            .close{
                width: 19.67rem;
                height: 6rem;
                background: #EAECEF;
                border-radius: 0.67rem;
                text-align: center;
                line-height: 6rem;
                color: #24292E;
                font-size: 2.33rem;
            }
            .confirm{
                width: 19.67rem;
                height: 6rem;
                background: #F7D049;
                border-radius: 0.67rem;
                text-align: center;
                line-height: 6rem;
                color: #24292E;
                font-size: 2.33rem;
            }
            .forbid{
                background: #59636D;
                color: #fff;
            }
        }
        
    }
}

</style>
